import React, { Component } from 'react';
import { StyleSheet, Text, View, PixelRatio, TextInput } from "react-native";
import { style } from '../../../../theme/style';
import { GLOBAL } from '../../../../config/global';
import MethodUtil from '../../../../utils/MethodUtil';

const scale = GLOBAL.SCALE;
export class QuantityInputCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isError: false,
			errorText: ''
		}
	}

	componentWillMount () {

	}
	render () {
		let { data, callBack } = this.props || {};
		let { value, maxValue, index, itemData } = data || {};
		let { isError, errorText } = this.state;
		return (
			<View style={styles.inputBody} >
				<Text style={styles.Qlquantity}>可转单量</Text>
				<View style={styles.inputBox}>
					<TextInput
						value={!isNaN(value) && value.toString()}
						style={[styles.QlquantityValue, styles.QlquantitInput, isError ? styles.QlquantitInputError : null]}
						onChangeText={(text) => {
							if (!MethodUtil.countObj.isNumber(text) && text != '') {
								this.setState({
									isError: true,
									errorText: '请输入有效数字'
								}, () => {
									itemData.quantity = text;
									itemData.checked = false;
									callBack && callBack(itemData, index)
								})
							} else if (maxValue < text) {
								this.setState({
									isError: true,
									errorText: `您输入了${text}大于可转单量${maxValue}`
								}, () => {
									itemData.quantity = text;
									itemData.checked = false;
									callBack && callBack(itemData, index)
								})
							} else if (text === '') {
								this.setState({
									isError: true,
									errorText: '请输入数量'
								}, () => {
									itemData.quantity = text;
									itemData.checked = false;
									callBack && callBack(itemData, index)
								})
							} else {
								this.setState({
									isError: false
								}, () => {
									itemData.quantity = text;
									callBack && callBack(itemData, index)
								})
							}
						}}
					/>
				</View>
				<Text style={styles.Qlquantity}>吨</Text>
				{isError ? <Text style={styles.inputText}>{errorText || ''}</Text> : null}
			</View>

		)
	}
}
const styles = StyleSheet.create({
	inputBody: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	inputBox: {
		position: 'relative'
	},
	inputText: {
		position: 'absolute',
		fontSize: 12 * scale,
		top: -18 * scale,
		right: 0,
		color: style.color.fontRed1
	},
	quantityListItem: {
		marginLeft: 10 * scale,
		marginRight: 10 * scale,
		marginTop: 10 * scale,
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
		backgroundColor: '#F4F7FE'
	},
	QlSelectBox: {
		flexDirection: 'row'
	},
	selectStyle: {
		height: 12 * scale,
		width: 12 * scale
	},
	selectOpacity: {
		flexDirection: 'row',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		alignItems: 'center'
	},
	selectTime: {
		paddingLeft: 10 * scale
	},
	QlSelectLie: {
		width: '50%',
		flexDirection: 'row',
		alignItems: 'center'
	},
	Qlquantity: {
		fontSize: 13 * scale
	},
	QlquantityValue: {
		marginLeft: 6 * scale,
		paddingVertical: 0
	},
	QlquantitInput: {
		backgroundColor: style.color.white,
		height: 28 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale,
		width: 73 * scale,
		marginRight: 5 * scale,
		textAlign: 'center',
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.white,
	},
	checkAllBox: {
		flexDirection: 'row',
		justifyContent: 'flex-end'
	},
	checkAllClick: {
		flexDirection: 'row',
		alignItems: 'center',
		padding: 8 * scale
	},
	checkAll: {
		fontSize: 14 * scale,
		fontWeight: 'bold',
		paddingLeft: 5 * scale,
		marginRight: 7 * scale
	},
	QlquantitInputError: {
		borderWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderColor: style.color.fontRed1,
	},
	Qlquantity: {
		fontSize: 13 * scale
	},
})